<template>
    <el-container style="height:100%">
      <el-aside class="aside">
        <div class="head">
          <div>
            <h1>vue3 admin</h1>
          </div>
        </div>
        <div class="line" />
        <el-menu
          :default-openeds="state.defaultOpen"
          background-color="#222832"
          text-color="#fff"
          :router="true"
          :default-active='state.currentPath'
        >
          <el-sub-menu index="1">
            <template #title>
              <span>Dashboard</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/introduce"><ep-DataLine />系统介绍</el-menu-item>
              <el-menu-item index="/dashboard"><ep-Odometer />Dashboard</el-menu-item>
              <el-menu-item index="/usersview"><ep-user />用户列表</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <span>首页配置</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/swiper"><ep-Picture/>轮播图配置</el-menu-item>
              <el-menu-item index="/hot"><ep-Star />热销商品配置</el-menu-item>
              <el-menu-item index="/new"><ep-Sell />新品上线配置</el-menu-item>
              <el-menu-item index="/recommend"><ep-TrendCharts />为你推荐配置</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <span>模块管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/category"><ep-Menu />分类管理</el-menu-item>
              <el-menu-item index="/service"><ep-Goods />服务管理</el-menu-item>
              <el-menu-item index="/guest"><ep-UserFilled />会员管理</el-menu-item>
              <el-menu-item index="/order"><ep-Ticket />订单管理</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <span>系统管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/account"><ep-Lock />修改密码</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <div class="main">
          <div class="head-info">
            <HeadInfo />
          </div>
          <div class="main-content">
              <router-view></router-view>
          </div>
      </div>
    </el-container>
</template>
<script setup>
import { reactive } from 'vue'
import HeadInfo from '@/components/HeadInfo.vue'

const state = reactive({
      defaultOpen: ['1', '2', '3', '4'],
      showMenu: true,
      currentPath: '/introduce',
      count: {
        number: 1
      }
    })

</script>
<style lang="scss" scoped>
$base-color: #ff3e41;
    .el-header{
        padding-top: 16px;
        paddint-bottom: 17px !important;
        font-style: bold;
        color: #ffffff;
        /*background-color: $base-color;*/

        h1 {
          color: $base-color;
        }
    }
    .head-info {
      padding: 24px 17px;
    }

.main {
  width: calc(100% - 200px)
}

.aside {
    width: 200px!important;
    height: 100vh;
    background-color: #222832;
    overflow: hidden;
    overflow-y: auto;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;

    h1 {
      font-size: 24px;
      color: $base-color;
      padding: 17px 0;
    }
  }
  .aside::-webkit-scrollbar {
    display: none;
  }
</style>
